<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-col class="filter-column" :span="24">
          <el-input
            placeholder="请输入资产类型"
            v-model="listQuery.asset_type"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入设备号"
            v-model="listQuery.device_no"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入品牌型号"
            v-model="listQuery.brand_model"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入使用人"
            v-model="listQuery.user"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入手机卡1"
            v-model="listQuery.card_1"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入手机卡1"
            v-model="listQuery.card_2"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="options-container">
      <el-row>
        <el-col :lg="16" :sm="12">
          <div style="width: 100%; height: 25px"></div>
        </el-col>
        <el-col :lg="8" :sm="12"
          ><div class="grid-content bg-purple">
            <el-button
              class="filter-item"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-edit"
              @click="addCtlShow()"
              >添加</el-button
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="手机卡批量上传excel模版下载"
              :hide-after="3000"
              placement="top-start"
            >
              <el-button
                class="filter-item"
                style="margin-left: 10px"
                type="success"
                icon="el-icon-download"
                @click="downModle()"
                >模版</el-button
              >
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="按模板的格式上传Excel表格"
              :hide-after="3000"
              placement="top-start"
            >
              <el-upload
                class="upload-demo"
                :multiple="false"
                style="display: inline-block"
                :action="upload_url"
                :show-file-list="false"
                :on-success="uploadSuccess"
              >
                <el-button icon="el-icon-upload2" type="success"
                  >批量</el-button
                >
              </el-upload>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :key="tableKey"
        :data="list"
        border
        fit
        @sort-change="sortHanlde"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="id"
          sortable="custom"
          align="left"
          width="105"
        >
        </el-table-column>
        <el-table-column
          label="资产类型"
          prop="asset_type"
          sortable="custom"
          width="150px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="设备号"
          prop="device_no"
          sortable="custom"
          width="150px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="品牌型号"
          prop="brand_model"
          sortable="custom"
          width="150px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="价值"
          prop="worth"
          sortable="custom"
          width="100px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="使用人"
          prop="user"
          sortable="custom"
          width="100px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="手机卡1"
          prop="card_1"
          sortable="custom"
          width="180px"
          align="left"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.card_1"></span>
            <el-button
              v-if="scope.row.card_1"
              type="text"
              @click="cartShowHandle(scope.row.card_1)"
              >详情>></el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="手机卡2"
          prop="card_2"
          sortable="custom"
          width="180px"
          align="left"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.card_2"></span>
            <el-button
              v-if="scope.row.card_2"
              type="text"
              @click="cartShowHandle(scope.row.card_2)"
              >详情>></el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          width="300"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="updateDep(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="mini" @click="removeDep(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="pageHandle"
      />
    </div>
    <div class="dialog-container">
      <!-- 角色编辑弹框 -->
      <mbdeviceEditctl
        :show.sync="mbdeviceEdit.show"
        :data="mbdeviceEdit.data"
        @success="getList"
      >
      </mbdeviceEditctl>
      <mbdeviceAddctl :show.sync="mbdeviceAdd.show" @success="getList">
      </mbdeviceAddctl>
      <cart-show-ctl :show.sync="cartShow.show" :data="cartShow.data">
      </cart-show-ctl>
    </div>
  </div>
</template>

<script>
import {
  getlist,
  remove_by_id,
  down_model,
  up_load_url,
  batch_processing,
  getOneByNum,
} from "@/api/adm_mbdevice";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import mbdeviceAddctl from "./components/mbdeviceAdd";
import mbdeviceEditctl from "./components/mbdeviceEdit";
import cartShowctl from "./components/cartShow";

export default {
  name: "rolesManage",
  components: {
    Pagination,
    mbdeviceAddctl,
    mbdeviceEditctl,
    "cart-show-ctl": cartShowctl,
  },
  data() {
    return {
      upload_url: up_load_url,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        asset_type: "",
        device_no: "",
        brand_model: "",
        worth: "",
        user: "",
        card_1: "",
        card_2: "",
        page: 1,
        limit: 10,
        filed: "id",
        sort: "ascending",
      },
      mbdeviceEdit: {
        show: false,
        data: undefined,
      },
      mbdeviceAdd: {
        show: false,
        data: undefined,
      },
      cartShow: {
        show: false,
        data: undefined,
      },
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getlist(this.listQuery).then((response) => {
        this.list = response.data;
        this.total = response.count || 0;
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    handleFilter() {
      this.getList();
    },
    sortHanlde(column) {
      console.log(column);
      this.listQuery.filed = column.prop;
      this.listQuery.sort = column.order;
      this.getList();
    },
    pageHandle(page) {
      this.listQuery.page = page.page;
      this.listQuery.limit = page.limit;
      this.getList();
    },
    removeDep(row) {
      this.$confirm(
        `此操作将永久删除【${row.asset_type} - ${row.device_no}】移动设备信息, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          remove_by_id(row.id).then((response) => {
            if (response.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateDep(row) {
      this.mbdeviceEdit.show = true;
      this.mbdeviceEdit.data = row;
    },

    addCtlShow(row) {
      this.mbdeviceAdd.show = true;
    },
    downModle() {
      down_model();
    },
    uploadSuccess(res) {
      if (res.data != 0) {
        this.$message({
          type: "success",
          message: "excell上传成功!",
        });
        batch_processing(res.data)
          .then((res) => {
            var data = res.data;
            var info = `
          批量处理完成，
          成功插入：${data.success}条，
          失败：${data.fail}条，
          重复：${data.repeat}条！
          `;
            this.$message({
              type: "success",
              message: info,
            });
            this.getList();
          })
          .catch((res) => {
            this.$message({
              type: "info",
              message: "批量处理失败!",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "excell上传失败!",
        });
      }
    },
    cartShowHandle(phonenum) {
      getOneByNum(phonenum)
        .then((res) => {
          if (res.data) {
            this.cartShow.show = true;
            this.cartShow.data = res.data;
          } else {
            this.$message({
              type: "info",
              message: "该电话卡信息还没有录入!",
            });
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "错误了!",
          });
        });
    },
  },
};
</script>
